<template>
  <div>
    <div id="myChart" :style="{width: '550px', height: '600px'}" class="aaaa">
    </div>
    <div id="myChart2" :style="{width: '550px', height: '650px',marginLeft:'50px'}" class="aaaa">
    </div>
    <el-select class="aaaa" @change="change" v-model="year" placeholder="年份" style="width: 120px">
      <el-option :label="2023" :value="2023"></el-option>
      <el-option :label="2022" :value="2022"></el-option>
      <el-option :label="2021" :value="2021"></el-option>
    </el-select>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  data() {
    return {
      year: 2023,
    }
  },
  methods:{
    change(){
      this.initOlderCheck();
    },
    initOlderCheck(){
      let url = "/older/olderCheck/" + this.year;
      axios.get(url).then(res => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart2'));

        // 指定图表的配置项和数据
        var option1 = {
          title: {
            text: '长者入住时间分布统计',
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['入住人数']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '入住人数',
              type: 'bar',
              data: res.data.data,
              markPoint: {
                data: [
                  {type: 'max', name: '最大值'},
                  {type: 'min', name: '最小值'}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: '平均值'}
                ]
              }
            },
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
      });
    },
    initOldNum(){
      axios.get("/older/oldNum",).then(res => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '长者年龄分布统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: res.data.data
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    }
  },
  mounted() {
    this.initOldNum();
    this.initOlderCheck();
  }
}
</script>
<style scoped>
.aaaa {
  float: left;
}
</style>

